<template>
	<view class="content">
		<view class="modify_pass">
			<view class="modify_item">
				<text>手机号</text>
				<input type="text"  disabled="true" v-model="mobile"/>
			</view>

			<view class="modify_item">
				<text>输入验证码</text>
				<input type="text" placeholder="请输入验证码" v-model="code"/>
				<view class="yzm" @click="getCode"><text>{{countdown}}</text></view>
			</view>

			<view class="modify_item">
				<text>新密码</text>
				<input type="password" placeholder="请输入新密码" v-model="password"/>
			</view>

			<view class="modify_item">
				<text>确认密码</text>
				<input type="password" placeholder="请再次输入密码 " v-model="confirm_password"/>
			</view>

			<!-- 确认按钮 -->
			<view class="confirm" @click="confirm">
				<text>确 认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdown: '获取验证码',
				time: '',
				mobile:'',
				password:'',
				confirm_password:'',
				code:''
			};
		},
		onShow(){
			const token = uni.getStorageSync('token');  
			if(token){
			  this.getUserInfo();
			}else{
			  uni.navigateTo({
				url:'../login/loginWx'
			  })
			}
		},
		methods: {
			getUserInfo(){
				var that=this;
				that.ajax({
					url:'api/user/getUserInfo',
					success:function(res){ 
						if(res.code!==200){
							uni.removeStorage({
							    key: 'token',
							    success: function (res) { 
							    }
							});
							uni.navigateTo({
								url:'../login/loginWx'
							})
						} 
						that.mobile=res.data.mobile
						uni.setStorage({
							key:'userInfo',
							data:res.data
						})
					}
				  })
			},
			getCode() {   
					var that=this;
					let miao = '秒'
					// 如果已经是获取倒计时,就不再重新计时
					if (this.countdown !== '获取验证码') {
						return
					} else {
						that.ajax({
							url:'api/common/getMobileCaptcha',
							data:{
								mobile:that.mobile,
								type:2
							},
							success:function(res){
								if(res.code==200){
									let num = 60
									clearInterval(that.time)
									that.time = setInterval(() => {
										num--
										if (num == 0) {
											that.countdown = '获取验证码'
											clearInterval(that.time)
										}else{
											that.countdown = num+'秒'
										}
									}, 1000)
								}else{
									uni.showToast({
											title:"" + res.msg,
											icon:'none'
									});
								}
							}
						  }) 
				}
				 

			},
			confirm(){
				var that=this;
				that.ajax({
					url:'api/user/changePassword',
					data:{
						mobile:that.mobile,
						password:that.password,
						confirm_password:that.confirm_password,
						code:that.code,
						type:2
					},
					success:function(res){
						if(res.code==200){

							uni.removeStorage({
							    key: 'token',
							    success: function (res) {
							       // console.log('success');
							    }
							});
							setTimeout(() => {
								uni.showToast({
									title:"修改成功,请重新登录",
									icon:'none',
									duration:1500,
									success() {
										uni.navigateTo({
											url:'../login/loginWx'
										})
									}
								});

							}, 10)
							
						}else{
							setTimeout(function(){
								uni.showToast({
									title:"" + res.msg,
									icon:'none'
								});
							},10)

						}
					}
				  })
			}
		}
	}
</script>

<style lang="less" scoped>
	.modify_pass {
		view {
			display: flex;
			margin: 0 30rpx;
			font-size: 30rpx;
			color: #666;
			height: 118rpx;
			line-height: 118rpx;

			& text {
				color: #333;
				width: 200rpx;
			}

			& input {
				flex: 1;
				margin: auto 0;
				font-size: 26rpx;
			}

			& .yzm {
				margin: auto 0;
				height: auto;
				width: 200rpx;
				text-align: center;
				line-height: 60rpx; 
				background-color: #FBA12D;
				border-radius: 30rpx;
				text{
					color: #fff;
				}
			}
		}

		.modify_item {
			border-bottom: 1rpx solid #ccc;
		}

		// 确认按钮
		.confirm {
			margin: 0 30rpx;
			margin-top: 300rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background-color: #2AABAD;
			border-radius: 45rpx;

			text {
				margin: 0 auto;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>
